<template>
  <div class="index_about">
    <div class="about-img">
      <img :src="data.imgurl" alt="">
    </div>
    <div class="about-content">
      <div class="head">
        <h2 class="title" :style="{color:app_tabBar.config.firstcolor}">
          {{data.title}}
        </h2>
        <p class="subtitle" :style="{color:app_tabBar.config.secondcolor}">
          {{data.subtitle}}
        </p>
      </div>
      <div class="editor">
        <p v-html="data.content"></p>
      </div>
      <a @click="linkMore" class="more" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">{{data.more_text}}</a>
    </div>
  </div>
</template>
<script>
import { switchTab } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    data: Object
  },
  computed: {
    ...mapGetters(['app_tabBar'])
  },
  methods: {
    linkMore() {
      switchTab('about', this)
    }
  }
}
</script>
<style lang="scss" scoped>
.index_about {
  .about-img img {
    width: 100%;
    margin-bottom: 20px;
  }
  .about-content p {
    font-size: 13px;
    color: rgb(89, 89, 89);
  }
}
</style>